<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪花飘落</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        header {
            width: 100%;
            height: 315px;
            background: url(images/header-bg.png);
        }

        section {
            width: 920px;
            height: inherit; /*继承父级的此样式*/
            margin: auto;
            background: url(images/snow-bg.png) 0px 0px,
            url(images/con-bg.png) no-repeat 0px 204px;
            -webkit-animation: auto 20s linear infinite;
            position: relative;
        }
        section:hover{
            -webkit-animation-play-state: paused;
        }

        @-webkit-keyframes auto {
            0% {
                background-position-y: 0,204px;
            }
            100% {
                background-position-y: 800px,204px;
            }
        }
        @-webkit-keyframes play {
            0% {transform: translate(0,-320px)} /*跟原来x，y的差值*/
            100% {transform: translate(0,0px)}
        }

        tree,ice{
            display: block;
            position: absolute;
            -webkit-animation: play 1s;
        }
        tree{
            width: 112px;
            height: 127px;
            background: url('images/tree(1).png');
        }
        tree:nth-child(1){
            top:169px;
            left:35px;
            -webkit-animation-duration: 1.2s;/*完成动画所用的时间*/
        }
        tree:nth-child(2){
            top:180px;
            left:200px;
            -webkit-animation-duration: 0.8s;
        }
        tree:nth-child(3){
            top:125px;
            left:350px;
            -webkit-animation-duration: 0.9s;
        }
        tree:nth-child(4){
            top:150px;
            left:515px;
            -webkit-animation-duration: 0.85s;
        }
        tree:nth-child(5){
            top:170px;
            left:680px;
            -webkit-animation-duration: 1.1s;
        }
        tree:nth-child(6){
            top:125px;
            left:805px;
            -webkit-animation-duration: 1s;
        }
        ice{
            width: 115px;
            height: 103px;
            background: url('images/ice.png');
            top:210px;
            left:410px;
            -webkit-animation-duration: 1.5s;
        }
    </style>
</head>
<body>
<header>
    <section>
        <tree></tree>
        <tree></tree>
        <tree></tree>
        <tree></tree>
        <tree></tree>
        <tree></tree>
        <ice></ice>
    </section>
</header>
</body>
</html>
